<template>
    <header>
        <van-nav-bar title="登录/注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
        <div class="wrap">
            <div class="type">
                <div :class="isShow ? 'active' : ''" @click="isShow = true">登录</div>
                <div :class="!isShow ? 'active' : ''" @click="isShow = false">注册</div>
            </div>
            <div class="from sign-in">
                <van-form @submit="onSubmitL" v-if="isShow">
                    <van-cell-group inset>
                        <van-field v-model="lUserAccount" name="account" label="邮箱" placeholder="请输入你的qq邮箱" :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="lPassWord" type="password" name="password" label="密码" placeholder="请输入你的密码" :rules="[{ required: true, message: '请填写密码' }]" />
                    </van-cell-group>
                    <!-- <div class="auto">
                        <van-checkbox v-model="checked" shape="square" icon-size="14px" style="font-size: 12px; text-align: 20px">自动登录？</van-checkbox>
                        <p>忘记密码？</p>
                    </div> -->
                    <div style="margin: 16px">
                        <van-button round block type="primary" native-type="submit"> 登录 </van-button>
                    </div>
                </van-form>
                <van-form @submit="onSubmitS" v-else>
                    <van-cell-group inset>
                        <van-field v-model="rUserPassName" name="passname" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
                        <van-field v-model="rUserAccount" name="account" label="邮箱" placeholder="请输入你的qq邮箱" :rules="[{ required: true, message: '请填写邮箱' }]"
                            ><template #button>
                                <van-button @click="getCodeApi" size="small" type="primary">发送验证码</van-button>
                            </template>
                        </van-field>
                        <van-field v-model="code" name="verificationCode" label="邮箱验证码" placeholder="请输入邮箱验证码" :rules="[{ required: true, message: '请输入邮箱验证码' }]" />
                        <van-field v-model="rPassWord" type="password" name="password" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
                        <van-field v-model="rAgPassWord" type="password" name="Agpassword" label="重复密码" placeholder="请再次输入密码" :rules="[{ required: true, message: '请再次填写密码' }]" />
                    </van-cell-group>

                    <div style="margin: 16px">
                        <van-button round block type="primary" native-type="submit"> 注册 </van-button>
                    </div>
                </van-form>
            </div>
        </div>
    </main>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getCode, register, signIn } from "@/api/api";
import { showSuccessToast, showFailToast } from "vant";
import { ref } from "vue";
import axios from "axios";
let router = useRouter();
let route = useRoute();
// 当前状态  登录/注册
let isShow = ref(true);
// 登录信息
const lUserAccount = ref("");
const lPassWord = ref("");
// 注册信息
const rUserPassName = ref("");
const rUserAccount = ref("");
const code = ref("");
const rPassWord = ref("");
const rAgPassWord = ref("");
// 是否自动登录
let checked = ref(false);
// 返回上一级
const onClickLeft = () => router.push({ name: "home" });
// 登录
const onSubmitL = (values) => {
    axios(signIn(lUserAccount.value, lPassWord.value, "u")).then(({ data }) => {
        if (data.s == 200) {
            showSuccessToast(data.m);
            let times = new Date().setTime(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
            document.cookie = `account=${lUserAccount.value};expires=` + times;
            localStorage.setItem("token", data.token);
            router.go(-1);
        } else {
            showFailToast(data.m);
        }
    });
};

// 获取验证码
let getCodeApi = () => {
    axios
        .post(getCode(), {
            email: rUserAccount.value,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                showSuccessToast(data.m);
            } else {
                showFailToast(data.m);
            }
        });
};
// 注册
const onSubmitS = (values) => {
    if (rPassWord.value == rAgPassWord.value) {
        axios
            .post(register(), {
                account: rUserAccount.value,
                passname: rUserPassName.value,
                password: rPassWord.value,
                eCode: code.value,
                type: "u",
            })
            .then(({ data }) => {
                if (data.s == 200) {
                    showSuccessToast(data.m);
                    isShow.value = true;
                } else {
                    showFailToast(data.m);
                    console.log(code.value);
                }
            });
    } else {
        showFailToast("再次输入密码不正确");
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    padding: 10vh 5vw 0;
    .type {
        width: 100%;
        display: flex;
        div {
            flex-grow: 1;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .active {
            color: #1989fa;
        }
    }
    .from {
        width: 100%;
        .auto {
            padding: 1vh 5vw;
            display: flex;
            justify-content: space-between;
            p {
                font-size: 12px;
                color: #1989fa;
            }
        }
    }
}
</style>
